<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        let timer = null;

        //匀速运动
        window.onload = function () {
            let oDiv = document.getElementById('div1');
            let oBtn = document.getElementById('btn1');

            oBtn.onclick = function() {
                clearInterval(timer);
                timer = setInterval(function () {
                    if (oDiv.offsetLeft < 700-15) { //-15是因为最后一次运动可能处于 700-15<位置<700,超过700后又会改为700,从而产生后退的现象
                        oDiv.style.left = oDiv.offsetLeft + 15 + 'px';
                        document.title = oDiv.offsetLeft+' , '+ 1;  //让标签显示距离和速度,最后一次为690,因为最后一次是直接移动到700位置的

                    }else {
                        clearInterval(timer);
                        oDiv.style.left = 700 + 'px';
                    }
                },30)
            };
        }
    </script>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: sandybrown;
            top: 60px;
            left: 0px;
            position: absolute; /*绝对不可以设为relative,会导致位移出现奇怪现象*/

        }
        #div2 {
            width: 2px;
            height: 300px;
            background: #000;
            position: absolute;
            top: 20px;
            left: 700px;
        }
    </style>
</head>

<body>

<div>
    <input type = "button" value="move" id="btn1">
    <div id="div1"></div>
    <div id="div2"></div>

</div>

</body>
</html>